<template>
	<layout>
		<u-navbar title="我的车队" :background="{ 'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)' }"
			:border-bottom="false" backIconColor="#fff" titleColor="#fff"></u-navbar>

		<view class="list" v-if="listData && listData.length > 0">
			<view v-for="(item, idx) in listData" :key="idx" class="h-box block-gray pad-sm mg-b-sm mg-t-sm"
				@click="clickMotorcadeDetail(idx)">
				<view class="img">
					<view class="leftImg">
						<u-lazy-load
							image="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/main_ming_juben_da@2x.png"
							:height="140" img-mode="aspectFill" :border-radius='[20, 0, 0, 20]'></u-lazy-load>
						<view class="hint">{{ item.name }}</view>
					</view>
					<view class="rightImg">
						<u-lazy-load loading-img="/static/easy-loadimage/loading.gif"
							error-img="/static/img/img_home_quesheng@2x.png" :image="item.thumbnail" :height="140"
							img-mode="aspectFill" :border-radius='[0, 20, 20, 0]' class="pointer-events-none">
						</u-lazy-load>
					</view>
				</view>
				<view class="flex-extend mg-l-xs">
					<view class="h-box">
						<text class="text-title flex-extend">{{item.name}}</text>
						<view class="uni-text-gray">{{subscribeStatusDic[item.status + ''].label}}</view>
						<view class="mg-l-sm" @click.stop='clickJoin(idx)' v-if="item.needCount">
							<u-tag :text="'￥' + item.costPerPerson / 100 + ' 加入'" bg-color="#FF5673"
								border-color="#FF5673" color="#fff" shape="circle" size="mini"></u-tag>
						</view>
					</view>
					<view class="uni-text-gray" v-if="item.roomId">{{item.storeName}} | {{item.roomName}}</view>
					<view class="uni-text-gray" v-else>{{item.storeName}}</view>
					<view class="h-box justify-between">
						<text style="color: #6667FF;">{{ formatTimeInterval(item.startTime, item.endTime) }}</text>
						<view class="h-box" v-if="item.needCount">
							<text class="uni-text-gray">还差</text>
							<text style="color: #FF5673;">{{item.needCount}}</text>
							<text class="uni-text-gray">人发车</text>
						</view>
					</view>
				</view>
			</view>
			<view class="h-fill">
				<uni-load-more :status="listStatus"></uni-load-more>
			</view>
		</view>

		<view v-else style="margin-top: 40%;">
			<u-empty></u-empty>
		</view>
	</layout>
</template>

<script>
	import {
		getNeareastCity,
		getMyMotorcade
	} from "@/api/platform/user.js"
	import {
		subscribeStatusDic
	} from "@/common/constants.js"
	import {
		mapState
	} from 'vuex'

	const db = uniCloud.database()
	const dbCmd = db.command
	const $ = dbCmd.aggregate

	export default {
		name: 'my-motorcade',
		data() {
			return {
				subscribeStatusDic,
				listData: [],

				total: -1,
				pageNum: 1,
				pageSize: 20,
				listStatus: 'more',

				userLocation: {},
				currentRegion: ''
			}
		},
		computed: {
			...mapState(['userInfo']),
			formatTimeInterval() {
				return (startTime = 0, endTime = 0) => this.$moment(startTime).format('M月D日 ') + this.$moment(startTime)
					.format('HH:mm') + '-' + this.$moment(endTime).format('H:mm')
			}
		},
		async onReady() {
			await this.getLocation()
			await this.getData()
		},
		async onPullDownRefresh() {
			await this.getLocation()
			await this.getData()
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.getData()
		},
		methods: {
			async clickJoin(idx) {
				let data = {
					from: 'motorcade-detail',
					motorcadeId: this.listData[idx]._id
				}
				uni.navigateTo({
					url: `/pagesSubscribe/create-order?data=${ encodeURIComponent(JSON.stringify(data)) }`
				})
			},

			clickMotorcadeDetail(index) {
				uni.navigateTo({
					url: "/pagesSubscribe/motorcade-detail?motorcadeId=" + this.listData[index]._id
				})
			},

			async getLocation() {
				let [err, loc] = await uni.getLocation({
					type: "gcj02"
				})
				if (err) {
					loc = uni.getStorageSync('userLocation')
				}
				this.userLocation = {
					latitude: loc.latitude,
					longitude: loc.longitude
				}
				this.currentRegion = uni.getStorageSync("currentRegion")
			},
			async getData() {
				try {
					if (this.total === this.listData.length) return

					uni.showLoading({
						mask: true
					})

					this.listStatus = 'loading'

					let {
						total,
						list
					} = await getMyMotorcade({
						showLoading: true,
						pageNum: this.pageNum++,
						pageSize: this.pageSize,
						userLocation: this.userLocation || null
					})
					this.total = total
					if (!this.total) {
						this.pageNum = 1
						this.listData = []
						this.listStatus = 'noMore'
						return
					}
					this.listData = this.listData.concat(list)
					if (this.total === this.listData.length) {
						this.listStatus = 'noMore'
					} else {
						this.listStatus = 'more'
					}
					uni.hideLoading()
				} catch (e) {
					this.listStatus = 'more'
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style scoped lang="scss">
	.list {
		margin: 0 30rpx;

		.block-gray {
			background-color: #EFF1F7;
			border-radius: 20rpx;
		}

		.img {
			width: 140rpx;
			height: 140rpx;
			position: relative;

			.leftImg {
				display: inline-block;
				width: 30rpx;
				position: absolute;
				left: 0;
				z-index: 2;

				.hint {
					position: absolute;
					top: 50%;
					transform: translateY(-50%) scale(.6);

					width: 30rpx;
					height: 140rpx;
					line-height: 1.3;
					display: flex;
					flex-direction: column;

					color: #fff;
					overflow: hidden;
					// text-overflow: ellipsis;
				}
			}

			.rightImg {
				display: inline-block;
				width: 112rpx;
				position: absolute;
				right: 0;

				.reco {
					position: absolute;
					top: -6rpx;
					right: 20rpx;

					.text {
						color: #fff;
						transform: scale(.6);
						text-align: center;
						position: absolute;
						z-index: 2;
						top: -22rpx;
					}
				}
			}
		}
	}
</style>
